<template>
  <div class="detail">
    <div class="detail_main" style="font-size:18px;">

      <el-button type="text" icon="el-icon-arrow-left" @click="$router.go(-1)">
        主机详情</el-button>

      <div class="detail_bottom">

        <!-- <div class="detail_bottom_left" >
          <img src="@/assets/images/hosts.png" alt="" >
        </div> -->

        <div class="detail_bottom_right">

          <physical-info :exhibition="true" :options="physicalData"
                         :detail="detailData">
          </physical-info>

          <el-divider direction="vertical" class="divider"></el-divider>

          <physical-info :options="logicData"></physical-info>

          <el-divider direction="vertical" class="divider"></el-divider>

          <div class="logic">
            <logic-info v-if="loginInfo_cpu" :info="loginInfo_cpu"></logic-info>
            <logic-info v-if="loginInfo_mem" :info="loginInfo_mem"></logic-info>
            <logic-info v-if="loginInfo_c" :info="loginInfo_c"></logic-info>

          </div>

        </div>
      </div>
    </div>
    <div class="detail_table">
      <div class="table_top">最新数据</div>
      <hawk-table :table-data="tableData" :selection="false" :options="[
        { key: 'name', label: '监控项名称' },
        { key: 'lastvalue', label: '最新数据' },
        { key: 'diffValue', label: '差值' }
      ]">

        <template #diffValue="{ row }">
          <span>{{ getDiffVal(row) }}</span>
        </template>

        <template #lastvalue="{ row }">
          <span class="valspan"> {{getLastValue(row)}}</span>
        </template>

      </hawk-table>
    </div>
  </div>
</template>

<script>
/**
 * @author 韩玉龙
 * @description 文件描述
 * @api 后台接口地址
 * @since 文件生成时间
 * @update 代码更新时间
 * @modifier 修改人
 * @bug bug名称或无
 * @version 版本号 例:v1.0.0
 */

import { getDetail } from '@/api/monitor/list/host'
import PhysicalInfo from './components/physicalIfo'

import LogicInfo from './components/logicInfo'

import { getOne } from '@/api/assets/dictionaries/department'
import { getOneById as getComRoom } from '@/api/assets/list/computerRoom'

export default {
  components: { PhysicalInfo, LogicInfo },
  data () {
    return {
      //业务系统id
      id: '',
      imgUrl: '',
      physicalData: [
        // { label: 'IP地址', value: '192.168.0.6' },
        // { label: '主机类型', value: '物理机' },
        // { label: '所属部门/公司', value: '郑州同多优/运维部' },
        // { label: '所属机房/机柜', value: '01期机房/021机柜' }
      ],
      logicData: [
        // { label: 'DNS地址', value: '255.255.255.255' },
        // { label: '网关', value: 'www.terdaweifi.com' },
        // { label: 'MAC地址', value: 'F8-32-E5-BC-3E-EA' },
        // { label: '运行时间', value: '45天18小时34分钟' }
      ],

      tableData: [],

      detailData: {},

      loginInfo_cpu: null,
      loginInfo_mem: null,
      loginInfo_c: null,

    }
  },

  methods: {
    getLastValue (row) {

      if(row.key == "system.uname" && row.lastvalue == 0){
        return ''
      }

      return row.lastvalue + row.units
    },

    getDiffVal (row) {

      let ret = row.tooSmallDiffValue == null ? (row.diffValue + row.units) : row.tooSmallDiffValue

      if (ret && ret != 'null') {
        return ret
      } else {
        return ''
      }

    },

    getComAndDep (depId) {

      getOne(depId)
        .then(ret => {
          this.physicalData[2].value = ret.data.company.name + '/' + ret.data.name
        })
        .catch()

      return ''

    },

    getComRoomAndCabin (data) {

      let cabId = data.cabinetid
      let roomId = data.computerroomid

      if (!cabId && !roomId) {
        return ''
      }

      getComRoom(roomId)
        .then(ret => {
          console.log(ret);

          if (ret.code == 20000 && ret.data) {
            this.physicalData[3].value = ret.data.name
          }else{
            this.physicalData[3].value = ''
          }
        })



    },

    async init () {
      const res = await getDetail(this.id)
      console.log(JSON.stringify(res), '-----------主机详情---')
      if (!res) {
        console.warn(res);

        return
      }
      this.detailData = res.data
      this.tableData = res.data.itemsList
      console.log(JSON.stringify(res));

      let data = this.detailData

      this.physicalData = [
        { label: 'IP地址', value: data.ip },
        { label: '主机类型', value: data.type },
        { label: '所属部门/公司', value: this.getComAndDep(data.departmentid) },
        { label: '所属机房/机柜', value: this.getComRoomAndCabin(data) }
      ]

      // 偿试获得系统运行时长
      let sysData = this.detailData.itemsList.find(ele => ele.key == "system.uptime")
      let runTimeShowStr = ''

      if (sysData) {
        let last = parseInt(sysData.lastvalue)
        let days = Math.floor(last / (24 * 60 * 60))
        last = last % (24 * 60 * 60)
        let hour = Math.floor(last / (60 * 60)) // 1小时
        last %= (60 * 60)
        let miniute = Math.floor(last / 60) // 分钟 

        runTimeShowStr = `${days}天${hour}小时${miniute}分钟`
      }

      this.logicData = [
        { label: 'DNS地址', value: data.dns },
        { label: '网关', value: data.gateway },
        { label: 'MAC地址', value: data.macAddress },
        { label: '系统运行时长', value: runTimeShowStr }
      ]

      let cpuInfo = this.detailData.itemsList.find(ele => ele.key == "system.cpu.util[,,]")

      if (cpuInfo) {
        this.loginInfo_cpu = {
          name: 'CPU使用率', // CPU
          size_used: this.transNum(cpuInfo.lastvalue),
          size_total: this.transNum(100),
          size_free: 100 - this.transNum(cpuInfo.lastvalue),
          size_unit: cpuInfo.units,
          size_per: this.transNum(cpuInfo.lastvalue),
        }

      } else {
        this.loginInfo_cpu = null
      }




      let memFree = this.detailData.itemsList.find(ele => ele.key == "vm.memory.size[free]")
      let memTotal = this.detailData.itemsList.find(ele => ele.key == "vm.memory.size[total]")

      if (memFree && memTotal) {

        let memeUsed = this.transNum(memTotal.lastvalue) - this.transNum(memFree.lastvalue)
        this.loginInfo_mem = {
          name: '内存使用', // CPU
          size_used: this.transNum(memeUsed),
          size_total: this.transNum(memTotal.lastvalue),
          size_free: this.transNum(memFree.lastvalue),
          size_unit: memFree.units,
          size_per: this.transNum(memeUsed / this.transNum(memTotal.lastvalue) * 100),
        }

      } else {
        this.loginInfo_mem = null
      }



      let cUsed = this.detailData.itemsList.find(ele => ele.key == "vfs.fs.size[C:,used]")
      let cTotal = this.detailData.itemsList.find(ele => ele.key == "vfs.fs.size[C:,total]")

      if (cUsed && cTotal) {
        this.loginInfo_c = {
          name: 'C盘使用', // CPU
          size_used: this.transNum(cUsed.lastvalue),
          size_total: this.transNum(cTotal.lastvalue),
          size_free: this.transNum(this.transNum(cTotal.lastvalue) - this.transNum(cUsed.lastvalue)),
          size_unit: cUsed.units,
          size_per: (() => {
            if (this.transNum(cTotal.lastvalue) == 0) return 0

            return this.transNum(this.transNum(cUsed.lastvalue) / this.transNum(cTotal.lastvalue) * 100)
          })(),
        }
      } else {
        this.loginInfo_c = null
      }
    },

    // 将字符串格式转为数字，保留二位小数
    transNum (numstr) {
      let value = Math.round(parseFloat(numstr) * 100) / 100.0

      // let valueStr = new String(value)
      // if(valueStr.indexOf('.') == -1){
      //     valueStr = valueStr +".00"
      // }
      // if(valueStr.split('.')[1].length > 2){
      //     value =  this.transNum(valueStr)
      // }
      // return valueStr

      return value

    }



  },

  created () {
    this.id = this.$route.params.id
    if (this.id) {
      sessionStorage.setItem("hostId", this.id)
    } else {
      this.id = sessionStorage.getItem('hostId')
    }
    this.init()
  }
}

</script>


<style lang='less' scoped>
.valspan {
  white-space: pre-wrap;
}

/deep/.el-descriptions-item__container {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

/deep/.el-descriptions :not(.is-bordered) td {
  padding-bottom: 0px;
  margin-top: 23px;
}
/deep/.el-descriptions__body {
  font-size: 14px;
}
/deep/.el-descriptions-row {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}
.el-button {
  font-size: 20px;
}
.el-button--text {
  font-weight: 550;
  color: #606266;
}
.logic {
  height: 100%;
  padding-top: 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.detail {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;
  .detail_main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    .detail_bottom {
      width: 100%;
      display: flex;
      .detail_bottom_left {
        width: 240px;
        height: 240px;
        min-width: 240px;
        margin-right: 30px;
        // border:1px solid #dcdcdc;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .detail_bottom_right {
        padding: 10px;
        // box-sizing: border-box;
        width: 100%;
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        font-size: 20px !important;
        .divider {
          height: 180px;
        }
      }
    }
  }
  .detail_table {
    width: 100%;
    height: 100%;
    padding-bottom: 40px;
    margin-top: 10px;
    border: 1px solid #dcdcdc;
    .table_top {
      display: flex;
      align-items: center;
      width: 100%;
      height: 40px;
      box-sizing: border-box;
      font-size: 18px;
      color: #606266;
      padding: 10px;
    }
  }
}
</style>
